import {
	getCart,
	delCart
} from "../../api/index.js"
import $U from '../../utils/badge.js'
// 导出一个 Vuex 模块
export default {
	// 定义模块的状态，用于存储数据
	state: {
		// 购物车商品列表，每个商品包含多个属性
		list: [
			// {
			//     id: 11,
			//     checked: false, // 商品是否被选中
			//     cover: '../../static/images/demo/list/1.jpg', // 商品封面图片路径
			//     title: '商品11', // 商品标题
			//     skusText: '绿色、标配', // 商品规格描述
			//     pprice: 100, // 商品单价
			//     num: 1, // 商品数量
			//     min: 1, // 商品最小购买数量
			//     max: 9, // 商品最大购买数量
			// },
			// {
			//     id: 12,
			//     checked: false,
			//     cover: '../../static/images/demo/list/2.jpg',
			//     title: '商品12',
			//     skusText: '黄色、标配',
			//     pprice: 200,
			//     num: 2,
			//     min: 1,
			//     max: 10,
			// },
			// {
			//     id: 13,
			//     checked: false,
			//     cover: '../../static/images/demo/list/3.jpg',
			//     title: '商品13',
			//     skusText: '绿色、套餐一',
			//     pprice: 100,
			//     num: 1,
			//     min: 1,
			//     max: 8,
			// }
		],
		// 用于存放选中商品的 id
		selectedAll: []
	},
	// 定义修改状态的方法，必须是同步的
	mutations: {
		// 初始化购物车
		initCartList(state, payload) {
			state.list = payload
			$U.setBadgeBar(state.list.length)
		},
		// 退出清空购物车
		clearCartList(state){
			state.list=[];
			state.selectedAll=[]
			$U.setBadgeBar(state.list.length)
		},
		
		// 单选商品，改变商品的选中状态
		selectItem(state, index) {
			// 获取当前商品的 id
			let id = state.list[index].id
			// 如果商品已经被选中
			if (state.list[index].checked) {
				// 将商品的选中状态改为未选中
				state.list[index].checked = false
				// 找到该商品 id 在 selectedAll 数组中的索引
				let i = state.selectedAll.indexOf(id)
				// 从 selectedAll 数组中移除该商品的 id
				state.selectedAll.splice(i, 1)
			} else {
				// 如果商品未被选中，将其选中状态改为选中
				state.list[index].checked = true
				// 将该商品的 id 添加到 selectedAll 数组中
				state.selectedAll.push(id)
			}
			// 打印选中商品的 id 数组，用于调试
			console.log('11111', state.selectedAll);
		},
		// 全选商品
		selectAll(state) {
			// 遍历商品列表，将每个商品的选中状态改为选中
			state.selectedAll = state.list.map((item) => {
				item.checked = true
				// 返回商品的 id
				return item.id
			})
			// 将所有商品的 id 存入 selectedAll 数组
		},
		// 全不选商品
		unselectAll(state) {
			// 遍历商品列表，将每个商品的选中状态改为未选中
			state.list.map((item) => {
				item.checked = false
			})
			// 清空 selectedAll 数组
			state.selectedAll = []
		},
		// 删除选中的商品
		delSelect(state) {
			state.list = state.list.map(item => {
				if (!item.checked) {
					return item;
				} else {
					return null;
				}
			}).filter(item => item !== null);
			state.selectedAll = [];
			$U.setBadgeBar(state.list.length)   //这行代码一下就解决了cart.vue代码中的watch监听写法
			// state.list = state.list.filter(item=>{
			// 	console.log('del',item.checked);
			// 	return !item.checked
			// })
			// state.selectedAll = []
		}
		// delSelect(state) {
		// 	// 弹出确认删除的模态框
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '您确定要删除吗',
		// 		success: (res) => {
		// 			// 如果用户点击了确定
		// 			if (res.confirm) {
		// 				console.log('用户点击确定');
		// 				// 过滤掉被选中的商品，只保留未选中的商品
		// 				state.list = state.list.filter(item => {
		// 					return !item.checked;
		// 				})
		// 				// 清空 selectedAll 数组
		// 				state.selectedAll = []
		// 			} else if (res.cancel) {
		// 				console.log('用户点击取消');
		// 			}
		// 		}
		// 	});
		// }
	},
	// 定义获取状态的计算属性
	getters: {
		// 判断是否全选
		checkedAll(state) {
			// 如果商品列表的长度等于选中商品的 id 数组的长度，则表示全选
			return state.list.length == state.selectedAll.length
		},
		// 计算选中商品的总价
		totalPrice(state) {
			let total = 0;
			// 遍历商品列表
			state.list.forEach(item => {
				// 如果商品被选中
				if (item.checked) {
					// 累加商品的总价
					total += item.pprice * item.num
				}
			})
			return total;
		},
		// 判断购物车是否为空
		isListShow(state) {
			$U.setBadgeBar(state.list.length)
			// 如果商品列表的长度为 0，则表示购物车为空
			return state.list.length == 0
		},
		// 获取购物车列表的长度
		getListLength(state){
			$U.setBadgeBar(state.list.length)
			return state.list.length
		}
	},
	// 定义异步操作或批量操作的方法
	actions: {
		getcartlist({state,commit}) {
			getCart().then(res => {
				console.log('reslist=>', res);
				commit('initCartList', res.data)
			})
		},
		doSelectAll(context) {
			context.getters.checkedAll ? context.commit('unselectAll') : context.commit('selectAll')
		},
		doDelSelect(context) {
			uni.showModal({
				title: '提示',
				content: '您确定要删除吗',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						let shop_ids = context.state.selectedAll.join(',')
						delCart(shop_ids).then(res => {
							console.log('deldel', res);
							if (res.msg == 'ok') {
								context.commit('delSelect')
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});

		}
	}
}